<template>
  <div class="content" style="margin-top: 0 !important">
    <div class="contbox6_10">
      <!-- <div class="titlelist6_10">机构管理 / 机构列表 / 支付方式</div> -->

      <div class="" style="margin-top: 10px !important">
        <div class="buttons">
          <el-button
            style="float: left"
            type="primary"
            icon="el-icon-plus"
            plain
            class="addPay"
            v-if="agtType != '普通代理'"
            @click="onnew(0)"
            >添加支付方式</el-button
          >
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          style="width: 98%; margin-bottom: 20px; margin-left: 20px"
        >
          <el-table-column
            label="支付方式"
            min-width="150"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.payType == 'wechat'">微信支付</span>
              <span v-if="scope.row.payType == 'alipay'">支付宝支付 </span>
              <span v-if="scope.row.payType == 'accountpay'">账户支付 </span>
              <span v-if="scope.row.payType == 'offline'">线下转账 </span>
            </template>
          </el-table-column>
          <el-table-column prop="payName" label="名称" min-width="250">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.payType == 'accountpay'">--</span>
                <span v-else>{{ scope.row.payName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createDate"
            label="添加时间"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="当前状态"
            min-width="120"
          ></el-table-column>
          <el-table-column label="操作" min-width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                type="text"
                v-if="
                  scope.row.payType == 'wechat' || scope.row.payType == 'alipay'
                "
                @click="handleEdit(scope.row)"
                >修改</el-button
              >
              <el-button type="text" @click="detail(scope.row)">查看</el-button>
              <el-button
                type="text"
                style="color: #f56c6c"
                @click="numDelete(scope.row, 1)"
                v-if="scope.row.status == '启用'"
                >停用</el-button
              >
              <el-button
                type="text"
                @click="numDelete(scope.row, 0)"
                v-if="scope.row.status == '停用'"
                >启用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button
            @click="back"
            class="filter-container"
            style="
              margin-left: 20px;
              float: left;
              text-align: left;
              font-size: 16px;
              color: rgb(31, 165, 243);
              cursor: pointer;
              width: auto;
            "
          >
            返回
          </el-button>
        </div>
      </div>
      <el-dialog :title="titles" :visible.sync="dialogVisible" width="600px">
        <el-form ref="form" :rules="rules" :model="form" label-width="150px">
          <div>
            <el-row>
              <el-form-item label="支付方式" prop="payType">
                <el-select
                  :disabled="disableds"
                  @change="payChange"
                  v-model="form.payType"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <div style="clear:both"></div>
            </el-row>
          </div>
          <div v-if="type == 1">
            <el-form
              ref="form"
              :rules="rules1"
              :model="form"
              label-width="150px"
            >
              <el-row>
                <el-form-item label="支付宝名称" prop="aliName">
                  <el-input
                    :disabled="disabled"
                    v-model="form.aliName"
                    maxlength="30"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="支付宝账户" prop="aliNo">
                  <el-input
                    :disabled="disabled"
                    @input="value=>{form.aliNo=value.replace(/[\u4E00-\u9FA5]/g,'')}"
                    maxlength="50"
                    v-model="form.aliNo"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="支付宝token" prop="appId">
                  <el-input
                    style="width: 320px"
                    :disabled="disabled"
                    v-model="form.appId"
                    resize="none"
                    type="textarea"
                    @input="value=>{form.appId=value.replace(/[\u4E00-\u9FA5]/g,'')}"
                    maxlength="140"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="aliEmail">
                  <el-input
                    :disabled="disabled"
                    v-model="form.aliEmail"
                    onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
                    autocomplete="off"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
          <div v-if="type == 2">
            <el-row>
              <el-form-item label="微信名称" prop="wechatName">
                <el-input
                  :disabled="disabled"
                  v-model="form.wechatName"
                  maxlength="30"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="商户号" prop="subMchid">
                <el-input
                  :disabled="disabled"
                  onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                  v-model="form.subMchid"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="秘钥" prop="appKey" v-if="false">
                <el-input
                  :disabled="disabled"
                  v-model="form.appKey"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="小程序Appid" prop="miniprogramAppid">
                <el-input
                  :disabled="disabled"
                  v-model="form.miniprogramAppid"
                  @input="value=>{form.miniprogramAppid=value.replace(/[\W]/g,'')}"
                  maxlength="50"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="小程序密钥" prop="miniprogramSecret">
                <el-input
                  :disabled="disabled"
                  v-model="form.miniprogramSecret"
                  type="textarea"
                  style="width: 320px"
                  resize="none"
                  @input="value=>{form.miniprogramSecret=value.replace(/[\u4E00-\u9FA5]/g,'')}"
                  rows="3"
                  autocomplete="off"
                  maxlength="2048"
                ></el-input>
              </el-form-item>
            </el-row>
          </div>
          <div v-if="type == 3" class="zhuan">
            <el-row v-if="showBoolInput == true" class="openBank">
              <el-form-item label="收款账户名称" prop="accountName">
                <el-input
                  :readonly="true"
                  :disabled="disabled"
                  v-model="form.accountName"
                ></el-input>
              </el-form-item>
              <el-form-item label="收款账户" prop="accountNo">
                <el-input
                  :readonly="true"
                  :disabled="disabled"
                  v-model="form.accountNo"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="收款银行名称" prop="bankName">
                <el-input
                  :readonly="true"
                  :disabled="disabled"
                  v-model="form.bankName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="收款支行名称" prop="openBank">
                <el-input
                  :readonly="true"
                  :disabled="disabled"
                  v-model="form.openBank"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <div style="clear:both"></div>
            </el-row>
            
              <div class="real" v-if="showBoolInput == false">
                该机构未实名，如需配置该支付方式请联系该机构；
              </div>
          </div>
          <div v-if="type == 4"></div>
        </el-form>
        <div style="clear:both"></div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sure()" :disabled="que"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { email } from "../../assets/js/commion";
export default {
  data() {
    return {
      showBoolInput: true,
      disableds: false,
      disabled: false,
      tableData: [],
      dialogVisible: false,
      titles: "添加支付方式",
      type: "",
      que: false,
      rules: {
        payType: [
          { required: true, message: "请选择启用类型", trigger: "blur" },
        ],
      },
      agtType: "",
      form: {
        name: "",
        officeUid: this.$route.query.officeUid,
      },
      form2: {
        accountName: "",
      },
      total: 0,
      options: [
        {
          value: "alipay",
          label: "支付宝",
        },
        // {
        //   value: "wechat",
        //   label: "微信",
        // },
        {
          value: "offline",
          label: "线下转账",
        },
        {
          value: "accountpay",
          label: "账户支付",
        },
      ],
    };
  },
  created() {
    this.agtType = this.$route.query.agtType;
    this.list();
    // this.getPayInfo()
  },
  methods: {
    goUrl() {
      this.$router.push({
        name: "oemBasic",
      });
    },
    // 获取线下转账
    getPayInfo() {
      var oemUid = this.$route.query.officeUid;
      axios
        .post("/api/office/getOemBankInfo", {
          oemUid: oemUid,
        })
        .then((res) => {
          console.log("获取的线下支付方式");
          console.log(res);
          if (res.data.code == "0000") {
            console.log("进行赋值");
            var val = (res.data.data.payType = "offline");
            this.form = res.data.data;
          } else {
            this.showBoolInput = false;
            this.que = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //列表
    list() {
      axios
        .post("/api/office/getPayInfoList", {
          officeUid: this.$route.query.officeUid,
        })
        .then((res) => {
          if (res.data.code == "0000") {
            this.tableData = res.data.data;
            for (var s = 0; s < this.tableData.length; s++) {
              this.tableData[s].status =
                this.tableData[s].status == 0 ? "启用" : "停用";
            }
            this.total = res.data.total;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        });
    },
    payChange(val) {
      console.log(val);
      this.que = false;
      this.options = [
        {
          value: "alipay",
          label: "支付宝",
        },
        // {
        //   value: "wechat",
        //   label: "微信",
        // },
        {
          value: "offline",
          label: "线下转账",
        },
        {
          value: "accountpay",
          label: "账户支付",
        },
      ];
      // this.clearValidate('form')
      if (val == "alipay" || this.form.payType == "alipay") {
        this.rules1 = {
          payType: [
            { required: true, message: "请选择启用类型", trigger: "blur" },
          ],
          aliName: [
            { required: true, message: "请输入支付宝名称", trigger: "blur" },
          ],
          aliNo: [
            { required: true, message: "请输入支付宝账号", trigger: "blur" },
          ],
          appId: [
            { required: true, message: "请输入支付宝token", trigger: "blur" },
          ],
          aliEmail: [
            { required: true, message: "请输入电子邮箱", trigger: "blur" },
          ],
        };
        this.type = 1;
      } else if (val == "wechat" || this.form.payType == "wechat") {
        this.rules = {
          payType: [
            { required: true, message: "请选择启用类型", trigger: "blur" },
          ],
          appKey: [{ required: true, message: "请输入秘钥", trigger: "blur" }],
          wechatName: [
            { required: true, message: "请输入微信名称", trigger: "blur" },
          ],
          subMchid: [
            { required: true, message: "请输入商户号", trigger: "blur" },
          ],
          miniprogramAppid: [
            { required: true, message: "请输入小程序appid", trigger: "blur" },
          ],
          miniprogramSecret: [
            { required: true, message: "请输入密钥", trigger: "blur" },
          ],
        };
        this.type = 2;
      } else if (val == "offline") {
        // var oemUid = localStorage.getItem("uid");
        this.rules = {
          accountName: [
            { required: true, message: "请输入名称", trigger: "blur" },
          ],
          accountNo: [
            { required: true, message: "请输入收款账户", trigger: "blur" },
          ],
          bankName: [
            { required: true, message: "请输入银行名称", trigger: "blur" },
          ],
          openBank: [
            { required: true, message: "请输入支行名称", trigger: "blur" },
          ],
        };
        this.getPayInfo();

        this.type = 3;
      } else {
        this.type = 4;
      }
      ///this.$refs.form.resetFields();
    },
    clearValidate(formName) {
      this.$refs[formName].clearValidate();
    },
    // 创建
    onnew() {
      this.form = {
        officeUid: this.$route.query.officeUid,
      };
      this.disableds = false;
      this.disabled = false;
      this.titles = "添加支付方式";
      this.type = "";
      this.dialogVisible = true;
      this.options = [
        {
          value: "alipay",
          label: "支付宝",
        },
        // {
        //   value: "wechat",
        //   label: "微信",
        // },
        {
          value: "offline",
          label: "线下转账",
        },
        {
          value: "accountpay",
          label: "账户支付",
        },
      ];
    },
    // 确定
    sure() {
      if (email(this.form.aliEmail) == false && this.type == 1) {
        layer.open({
          content: "电子邮箱输入有误",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
        return false;
      }
      console.log(this.form);
      this.form.officeUid = this.$route.query.officeUid;
      if (this.titles == "添加支付方式") {
        axios.post("/api/office/addPayType", this.form).then((res) => {
          if (res.data.code == "0000") {
            this.dialogVisible = false;
            this.list();
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        });
      } else if (this.titles == "修改支付方式") {
        axios.post("/api/office/updatePayType", this.form).then((res) => {
          if (res.data.code == "0000") {
            this.dialogVisible = false;
            this.list();
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        });
      } else {
        this.dialogVisible = false;
      }
    },
    // 停用启用
    numDelete(n, s) {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/office/updatePayStatus",
          data: {
            officeUid: n.oemUid,
            payType: n.payType,
          },
        })
        .then(function (d) {
          if (d.data.code == "0000") {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            _this.list();
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        })
        .catch(function (error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    // 修改
    handleEdit(val) {
      axios
        .post("/api/office/getPayType", {
          officeUid: val.oemUid,
          payType: val.payType,
        })
        .then((res) => {
          if (res.data.code == "0000") {
            console.log(res);
            if (res.data.data.payType == "accountpay") {
              this.options.push({
                value: "accountpay",
                label: "账户支付",
              });
            }
            this.form = res.data.data;
            this.titles = "修改支付方式";
            this.payChange(res.data.data.payType);
            this.disableds = true;
            this.disabled = false;
            this.dialogVisible = true;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        });
    },
    // 查看
    detail(val) {
      axios
        .post("/api/office/getPayType", {
          officeUid: val.oemUid,
          payType: val.payType,
        })
        .then((res) => {
          if (res.data.code == "0000") {
            console.log("点击了");
            if (res.data.data.payType == "accountpay") {
              console.log("进入这里");
              setTimeout(() => {
                this.options.push({
                  value: "accountpay",
                  label: "账户支付",
                });
              }, 200);
            }
            this.form = res.data.data;
            this.titles = "查看支付方式";
            this.payChange(res.data.data.payType);
            this.disabled = true;
            this.disableds = true;
            this.dialogVisible = true;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        });
    },
    // 返回
    back() {
      this.$router.push("/homePage/mechanismaa");
    },
  },
};
</script>
<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.content {
  min-width: calc(100% - 60px);
  height: 100vh;
}
/deep/ .el-dialog {
  height: 450px;
  position: relative;
}
/deep/ .el-dialog__footer {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
/deep/ .el-form-item {
  margin-bottom: 20px;
}
/* .buttons {
  margin-top: 20px;
} */
/deep/ .el-input {
  width: 320px;
}
/deep/ .el-input__inner {
  width: 100%;
}
.real {
  text-align: left;
  padding-left: 159px;
  color: red;
  transform: translateY(-16px);
}
.addPay {
  padding: 10px 5px;
}
.aHref {
  cursor: pointer;
  text-decoration: underline;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: none !important;
}
/deep/ .openBank .el-form-item__error {
  display: none !important;
}
</style>
